Page({
  data: {
    currentPhoneNumber: '',
    newPhoneNumber: '',
    verificationCode: '',
    codeButtonText: "获取验证码",
    codeButtonDisabled: false, // 控制按钮是否可点击
    codeButtonLoading: false, // 控制按钮是否显示加载动画
    countdown: 60, // 倒计时时间
    codeKey: '', // 用于存储验证码 key
    verifyCodeImage: '', // 存储验证码图片 base64
    intervalId: null, // 用于存储倒计时定时器的 ID
  },

  onLoad() {
    // 页面加载时从本地存储或服务器获取用户信息
    const userInfo = wx.getStorageSync('userDetails');
    if (userInfo) {
      this.setData({
        currentPhoneNumber: userInfo.phone,
        newPhoneNumber: userInfo.phone || '',
      });
    }
  },

  onUnload() {
    // 页面关闭时清除倒计时
    if (this.data.intervalId) {
      clearInterval(this.data.intervalId);
    }
  },

  onNewPhoneNumberInput(event) {
    const value = event.detail || ''; // 确保 value 不是 undefined
    this.setData({ newPhoneNumber: value });
    console.log("手机号是" + this.data.newPhoneNumber);
  },

  onVerificationCodeInput(event) {
    this.setData({ verificationCode: event.detail });
  },

  getVerificationCode() {
    const newPhoneNumber = this.data.newPhoneNumber;

    // 1. 手机号格式校验
    if (!this.validatePhoneNumber(newPhoneNumber)) {
      wx.showToast({
        title: '手机号无效',
        icon: 'error',
      });
      return;
    }

    // 2. 检查输入的手机号是否与缓存的手机号相同
    const userDetails = wx.getStorageSync('userDetails');
    if (userDetails && userDetails.phone === newPhoneNumber) {
      wx.showToast({
        title: '已绑定该手机号',
        icon: 'error',
      });
      return;
    }

    // 3. 清除之前的倒计时
    if (this.data.intervalId) {
      clearInterval(this.data.intervalId);
    }

    // 4. 禁用按钮并显示倒计时
    this.setData({
      codeButtonDisabled: true, // 禁用按钮
      codeButtonLoading: false, // 不显示加载动画
      codeButtonText: `${this.data.countdown}s后重发`,
    }, () => {
      console.log("按钮状态更新为禁用，显示倒计时"); // 添加日志
    });

    // 5. 开始倒计时
    let countdown = this.data.countdown;
    const intervalId = setInterval(() => {
      countdown--;
      this.setData({
        codeButtonText: `${countdown}s后重发`,
      });
      if (countdown <= 0) {
        clearInterval(intervalId);
        this.setData({
          codeButtonDisabled: false, // 倒计时结束，恢复按钮可点击
          codeButtonLoading: false,
          codeButtonText: "获取验证码",
          countdown: 60,
        }, () => {
          console.log("倒计时结束，按钮状态恢复"); // 添加日志
        });
      }
    }, 1000);

    // 6. 存储定时器 ID
    this.setData({ intervalId });

    // 7. 发送网络请求
    wx.request({
      url: 'http://localhost:8080/user/code/getCode',
      method: 'GET',
      header: {
        token: wx.getStorageSync("userInfo").data.token,
      },
      success: (res) => {
        console.log("get code res", res); // 添加日志
        if (res.data && res.data.code === 1 && res.data.data && res.data.data.codePic) {
          this.setData({
            codeKey: res.data.data.codeKey,
            verifyCodeImage: res.data.data.codePic, // 设置 Base64 图片数据
          }, () => {
            console.log("验证码图片更新成功"); // 添加日志
          });
        } else {
          wx.showToast({
            title: res.data ? res.data.msg || '获取失败，返回数据异常' : '获取失败，返回数据为空',
            icon: 'error',
          });
          clearInterval(intervalId); // 停止倒计时
          this.setData({
            codeButtonDisabled: false, // 请求失败，恢复按钮可点击
            codeButtonLoading: false,
            codeButtonText: "获取验证码",
            countdown: 60,
          }, () => {
            console.log("获取验证码失败，按钮状态恢复"); // 添加日志
          });
        }
      },
      fail: (err) => {
        console.error("get code error", err); // 添加日志
        wx.showToast({
          title: '网络请求失败，请稍后重试',
          icon: 'error',
        });
        clearInterval(intervalId); // 停止倒计时
        this.setData({
          codeButtonDisabled: false, // 网络请求失败，恢复按钮可点击
          codeButtonLoading: false,
          codeButtonText: "获取验证码",
          countdown: 60,
        }, () => {
          console.log("网络请求失败，按钮状态恢复"); // 添加日志
        });
      },
    });
  },

  save() {
    if (!this.data.newPhoneNumber) {
      wx.showToast({
        title: '请输入手机号',
        icon: 'error',
      });
      return;
    }
    if (!this.data.verificationCode) {
      wx.showToast({
        title: '请输入验证码',
        icon: 'error',
      });
      return;
    }
    if (!this.data.codeKey) {
      wx.showToast({
        title: '请先获取验证码',
        icon: 'error',
      });
      return;
    }

    wx.request({
      url: 'http://localhost:8080/user/user/update',
      method: 'PUT',
      header: {
        'Content-Type': 'application/json',
        token: wx.getStorageSync("userInfo").data.token,
      },
      data: {
        phone: this.data.newPhoneNumber,
      },
      success: (res) => {
        console.log("update res", res);
        if (res.data && res.data.code === 1) {
          // 更新本地缓存的 userDetails
          const userDetails = wx.getStorageSync('userDetails');
          if (userDetails) {
            userDetails.phone = this.data.newPhoneNumber; // 更新手机号
            wx.setStorageSync('userDetails', userDetails); // 保存到本地缓存

            // 检查缓存是否更新成功
            const updatedUserDetails = wx.getStorageSync('userDetails');
            console.log("更新后的 userDetails:", updatedUserDetails); // 添加日志
          }
          wx.showToast({
            title: '更换成功',
          });
        } else {
          wx.showToast({
            title: res.data ? res.data.msg || '验证失败，返回数据异常' : '验证失败，返回数据为空',
            icon: 'error',
          });
        }
      },
      fail: (err) => {
        console.error("update error", err);
        wx.showToast({
          title: '网络请求失败，请稍后重试',
          icon: 'error',
        });
      },
    });
  },

  /**
   * 验证手机号格式
   *
   * @param {string} phone 手机号
   * @returns {boolean} 是否有效
   */
  validatePhoneNumber(phone) {
    const phoneRegex = /^1[3-9]\d{9}$/; // 简单的手机号正则表达式
    return phoneRegex.test(phone);
  },
});